<template>
	<div class="addDevice">
		<van-nav-bar title="添加设备" fixed left-arrow="" @click-left='goBack()'>
			<van-button type="primary" slot='right' color="#62cff9" @click='save'>保存</van-button>
		</van-nav-bar>
		<div class="area">
			<van-cell-group>
				<van-field :clearable='true' v-model="deviceName" clearable label="设备名称" placeholder="请输入设备名称" @click-right-icon="$toast('question')"
				 required="" />
				<van-field :clearable='true' v-model="num" label="设备编号" placeholder="请输入设备编号"/>
				<van-field :clearable='true' v-model="producer" placeholder="请输入生产商" label="设备生产商"></van-field>
				<van-field :clearable='true' v-model="type" label="规格型号" placeholder="请输入设备型号"></van-field>
				<!-- <van-cell title="设备所属" required="">
					<van-dropdown-menu>
					  <van-dropdown-item v-model="depId" :options="departs"/>
					</van-dropdown-menu>
				</van-cell> -->
				<van-cell title="设备区域" required="">
					<van-dropdown-menu>
					  <van-dropdown-item v-model="area" :options="areas"/>
					</van-dropdown-menu>
				</van-cell>
			</van-cell-group>
			<div id='code'></div>
			<canvas id="canvas" ref='qrCodeDiv'></canvas>
		</div>
	</div>
</template>

<script>
	import {Toast} from 'vant'
	//import html2canvas from 'html2canvas'
	//引入生成二维码插件
	//import QRCode from 'qrcode'
	export default {
		data() {
			return {
				depId:'',
				option1:[],
				selectId:'',
				imgData:'',
				showRepairMan: false,
				repairDepart: '', //维修部门
				repairMan: '', //维修员
				activeRepairDepartIndex: null, //点击选择维修部门索引
				activeRepairManIndex: null, //点击选择维修人员索引
				keepDepart: '', //保养员部门
				keepMan: '', //保养员姓名
				showkeepMan: false,
				activeKeepDepartIndex: null, //点击选择的保养员部门索引
				activekeepManIndex: null, //点击选择的保养员索引
				activeAreaIndex: null, //点击选择的地区索引
				deviceName: '', //设备名称
				num: '', //设备编号
				producer: '', //生产商
				type: '', //设备型号
				//belong:'',//设备所属
				showDeparts: false,
				radio: null,
				depart: '', //所属部门
				keepCycle: '', //周期,
				departs:[],
				activeDepartIndex: null, //点击的部门索引
				area: '', //所属地区
				keepContent: '', //保养内容
				nextKeppContent: '', //下次保养内容
				keepTimes: '', //保养总次数
				repairTimes: '', //维修次数
				checkTimes: '', //巡检次数
				msg: 'hello vue',
				codes: '',
				areas:[],//设备区域
			}
		},
		/* components: {
			QRCode,
			html2canvas
		}, */
		created(){
			//this.getAllDep()
			this.getAreas()
		},
		methods: {
			//获取所有设备区域
			getAreas(){
				this.$axios.post('/Facility/queryArea.do').then(res=>{
					if(res.data.status === 200){
						res.data.msg.forEach(item=>{
							this.areas.push({text:item.name,value:item.id})
						})
					}
				})
			},
			/* //获取所有部门
			getAllDep(){
				this.$axios.post('Facility/getAllDep.do').then(res=>{
					if(res.status === 200){
						res.data.msg.forEach(item=>{
							this.departs.push({text:item.name,value:item.id})
						})
					}
				})
			}, */
			//添加设备
			save(){
				if(!this.area||!this.deviceName){
					return Toast.fail({message:'请输入完整信息',duration:900})
				}
				this.$axios.post('Facility/addFacility.do',{depid:this.depId,areaid:this.area,facilityname:this.deviceName,id:this.num,producers:this.producer,specifications:this.type,versionNumber:''}).then(res=>{
					if(res.data.status === 200){
						Toast.success({message:'添加成功',duration:1000})
					}else if(res.data.status === 500){
            Toast.fail({message:res.data.msg,dutation:900})
          }
				}).catch(err=>{
          Toast.fail({message:'添加失败，系统错误',duration:900})
        })
			},
			//生成二维码
			/* useqrcode() {
				var canvas = document.getElementById('canvas')
				QRCode.toCanvas(canvas, this.num, function(error) {
					if (error) return console.error(error)
					console.log('QRCode success!');
				})
				this.createPicture() // 二维码生成后，执行生成图片
			}, */
			//生成二维码图片
			/* createPicture() {
				html2canvas(this.$refs.qrCodeDiv, {
					backgroundColor: null,
					width: 200,
					height: 200
				}).then(canvas => {
					var imgData = canvas.toDataURL('image/jpeg')
					this.imgData = imgData
				})
			} */
		},
		watch:{

		}
	}
</script>

<style scoped="scoped">
  .van-button--normal{
    padding: 0 .8rem;
  }
	.van-dropdown-menu {
		height: 1.25rem;
		line-height: 1.25rem;
	}
	.van-button {
		border-radius: 7px;
		height: 1.8rem;
		line-height: 1.8rem;
	}

	.upImg {
		vertical-align: middle;
	}

	.activeDepart {
		color: #17ABE3;
	}

	.area {
		margin-top: 3rem;
		overflow: scroll;
	}

	.popupTitile {
		font-size: .87rem;
		text-align: center;
		margin: 0;
		margin-top: .5rem;
	}

	.van-popup--center {
		top: 40%;
		border-radius: 8px;
		width: 76%;
		padding-bottom: 30px;
	}

	.belogContainer {
		display: flex;
		justify-content: space-between;
	}

	.depart,
	.bglog-area {
		font-size: .86rem;
		color: #333333;
		margin: 0 auto;
		margin-top: .4rem;
	}

	.depart li,
	.bglog-area li {
		padding: .7rem;
	}

	.departTitle {
		text-align: center;
	}
</style>
